<template>
	<view v-if="info" class="content">
		<scroll-view scroll-y="true" class="main">
			<view class="addressBox" v-if="address"  @click="toSelectAddress">
				<view class="address">
					{{address.province}}{{address.city}}{{address.district}}{{address.address}}
				</view>
				<view class="user">
					<view class="">
						<text class="name">{{address.name}}</text>
						<text>{{address.mobile}}</text>
					</view>
					<view class="update">
						<text>修改地址</text>
						<image src="/static/right_grey.png" class="icon" mode=""></image>
					</view>
				</view>
			</view>
			<view class="addressBox" v-else  @click="toSelectAddress">
				<view class="address">
					请添加地址
				</view>
				<view class="user">
					<view class="">
						<text class="name"></text>
						<text></text>
					</view>
					<view class="update">
						<text>添加地址</text>
						<image src="/static/right_grey.png"  class="icon"></image>
					</view>
				</view>
			</view>
			<view class="project">
				<image class="fengmian" :src="$oss(info.cateInfo.image)" mode="aspectFill"></image>
				<view class="right">
					<view class="name">{{info.cateInfo.name}}</view>
					<view class="gongneng">
						<view class="">{{info.cateInfo.intro}}</view>
					</view>
					<view class="price">
						<view class="money">
							<text>¥</text>
							<text>{{info.cateInfo.price}}</text>
						</view>
						<view class="blank"></view>
						<!-- <view class="vipPrice">
							<text>¥ 198</text>
						</view> -->
						<view class="num">x{{num}}</view>
					</view>
					<view class="naozhong">
						<image src="/static/naozhong.png" mode="widthFix"></image>
						<text>{{info.cateInfo.costmin}}分钟</text>
					</view>
				</view>
			</view>
			<view class="optionBox">
				<view class="option option1">
					<view class="label">服务技师</view>
					<view class="right">
						<text>{{info.service.name}}</text>
						<image src="/static/down.png" class="icon" mode="widthFix"></image>
					</view>
				</view>
				<view class="option">
					<view class="label">服务时间</view>
					<view class="right" @click="selectTimeShow=true">
						<text class="chooseTime" v-if="timeInfo">{{dayName}} {{timeInfo.starttime |  | date('hh:MM') }}</text>
						<text class="chooseTime" v-else>选择服务时间</text>
						<image src="/static/down.png" class="icon" mode="widthFix"></image>
					</view>
				</view>

				<view class="option">
					<view class="label">出行方式</view>
					<view class="right">
						<view v-for="(i,index) in goway" class="btn " @click="choosegoway(index)"
							:class="traveltype==i.type?'btn1':''">{{i.name}}</view>
					</view>
				</view>
				<view class="error" v-if="msg">{{msg}}</view>
				<view class="remark">
					<u--textarea v-model="note" placeholder="填写备注信息"></u--textarea>
				</view>
			</view>
			<view class="totalBox">
				<view class="total">
					<view class="zongjia">
						<view class="label">套餐总价</view>
						<view class="money">
							<text>￥{{info.cateInfo.price * num}}</text>
						</view>
					</view>
					<view class="zongjia chefei" v-if="travel">
						<view class="label">出行车费<text class="didi" v-if="travel.distance">(全程公{{travel.distance}}公里)</text></view>
						<view class="money">
							<text>￥{{travel.distance_price}}</text>
						</view>
					</view>
				</view>
			</view>
			<u-popup :show="selectTimeShow" @close="close" @open="open" :round='14' :closeable='true'>
				<view class="popobx">
					<text class="flex-cneter u-font-bold u-m-t-50">选择时间</text>
					<view class="popobxcontent u-m-t-50">
						<view class="popboxday flex">
							<view class="popboxday_left flex">
								<view class="popboxday_left_item flex" @click="chooseday(0)" :class="day==0?'green':''">
									<text class="u-font-30 u-font-bold">今天</text>
									<text class="u-font-22 u-font-bold u-m-t-20">{{today}}</text>
									<view class="u-m-t-20" v-show="day==0" style="border-bottom: 5rpx solid #00CE9B; border-radius: 20rpx; width: 30rpx;"></view>
								</view>
								<view class="popboxday_left_item flex" @click="chooseday(1)" :class="day==1?'green':''">
									<text class="u-font-30 u-font-bold">明天</text>
									<text class="u-font-22 u-font-bold u-m-t-20">{{tomorrow}}</text>
									<view class="u-m-t-20" v-show="day==1" style="border-bottom: 5rpx solid #00CE9B; border-radius: 20rpx; width: 30rpx;"></view>
								</view>
								<view class="popboxday_left_item flex" @click="chooseday(2)" :class="day==2?'green':''">
									<text class="u-font-30 u-font-bold">后天</text>
									<text class="u-font-22 u-font-bold u-m-t-20">{{other}}</text>
									<view class="u-m-t-20" v-show="day==2" style="border-bottom: 5rpx solid #00CE9B; border-radius: 20rpx; width: 30rpx;"></view>
								</view>
							</view>
							<view class="popboxday_right white" @tap="selectTimeShow=false">
								确定
							</view>
						</view>
						<scroll-view scroll-y="true" style="height: 70%;"  >
							<view class="popboxtime flex">
								<template v-for="(item,index) in times" >
									<view class="popboxtime_item other" v-if="(nowtime < item.starttime) && (item.state == 2 || nowtime + 30*60 > item.starttime)">
										<view class="t">{{item.starttime | date('hh:MM')}}</view>
										<view class="b">暂不预约</view>
									</view>
									<view class="popboxtime_item other" v-else-if="(nowtime < item.starttime) && item.state == 1" >
										<view class="t">{{item.starttime | date('hh:MM')}}</view>
										<view class="b">已被预约</view>
									</view>
									<view class="popboxtime_item" v-else-if="(nowtime < item.starttime)" @click="mychoosetime(item)" :class="timeid==item.id?'green':''">
										<view class="t">{{item.starttime | date('hh:MM')}}</view>
									</view>
								</template>
							</view>
						</scroll-view>
					</view>
				</view>
			</u-popup>
				
			
		</scroll-view>
		
		<view class="pay">
			<view class="needPay">
				<view class="">需支付</view>
				<view class="money">¥<text>{{allprice}}</text></view>
			</view>
			<view class="btn" @click="toPayOrder">去支付</view>
		</view>
		
		
	</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				note: '',
				selectTimeShow: false,
				columns: [
					['今天', '明天', '后天'],
					['00:00', '00:30', '01:00', '01:30', '02:00', '02:30']
				],
				goway: [{name:'滴滴/出租',type: 0}, {name: '公交/地铁',type: 1}],
				gowayindex: 0,
				current:0,
				service_id: '',
				cate_id: '',
				address: '',
				travel: '',
				traveltype: 0,
				num: 1,
				address_id: '',
				day: 0,
				timeInfo: '',
				timeid: '',
				dayName: '',
				info: '',
				times: '',
				nowtime: '',
				tomorrow: '',
				other: '',
				today: '',
				coupon: '',
				order_id: '',
				msg: ''
				
			}
		},
		computed: {
			allprice() {
				let num = this.info && this.travel &&  Number(this.travel.distance_price) - Number((this.coupon ? this.coupon.reduce : 0))
				return  num  && num.toFixed(2)
			}
		},
		onLoad(option) {
			this.service_id = option.id
			this.cate_id = option.cate_id
			this.num = option.num
			this.order_id = option.order_id
			this.getTravel()
			uni.$on('selectAddress',(data)=>{
				this.address = data
				this.getTravel()
			})
			uni.$on('selectCoupon',(data)=>{
				this.coupon = data
			})
			this.showTime()
			this.getDay()
		},
		methods: {
			getDay(){
				let today = new Date();
				this.today = uni.$u.timeFormat(today, 'mm-dd')
				let  tomorrow = new Date();
				tomorrow.setDate(tomorrow.getDate() + 1);
				this.tomorrow = uni.$u.timeFormat(tomorrow, 'mm-dd')
				
				let  other = new Date();
				other.setDate(other.getDate() + 2);
				this.other = uni.$u.timeFormat(other, 'mm-dd')
				
			},
			showTime(){
				this.nowtime = parseInt((new Date()).getTime() /1000);
				
				this.getTimes().then(res => {
					
					this.times = res
				})
			},
			getAddress(){
				return new Promise((resole,reject)=>{
					this.$api.post('/address', {}).then(res => {
						if (res.code == 1) {
							if(res.data.length > 0){
								resole(res.data[0])
							} else {
								resole('')
							}
							
						}
					}).catch((res) => {
					
					})
				})
			},
			getInfo(){
				return new Promise((resole,reject)=>{
					this.$api.post('/settle', {
					cate_id: this.cate_id,
					user_id: this.service_id
				}).then(res => {
						if (res.code == 1) {
							resole(res.data)
						}
					}).catch((res) => {
					
					})
				})
			},
			getTimes(){
				return new Promise((resole,reject)=>{
					this.$api.post('/updatetime', {
						service_id: this.service_id,
						type: this.day
					}).then(res => {
						if (res.code == 1) {
							resole(res.data)
						}
					}).catch((res) => {
					
					})
				})
				
			},
			getdays(time){
				let today = new Date();
				let year = today.getFullYear();
				let  tomorrow = new Date();
				tomorrow.setDate(tomorrow.getDate() + 1);
				tomorrow.setHours('0');
				tomorrow.setMinutes('0');
				tomorrow.setSeconds('00');
				tomorrow =Math.round(tomorrow.getTime() / 1000) 
				let  other = new Date();
				other.setDate(other.getDate() + 2);
				other.setHours('0');
				other.setMinutes('0');
				other.setSeconds('00');
				other =Math.round(other.getTime() / 1000) 
				if(time < tomorrow){
					return '今天'
				}else if(time > tomorrow && time < other){
					return '明天'
				}else if(time > other){
					return '后天'
				}
			},
			choosegoway(index) {
				this.traveltype = index
				if(this.address.id){
					this.getTravel()
				}
			},
			async getTravel(){
				if(!this.info){
					this.info = await this.getInfo()
					this.timeInfo = this.info.timeInfo
					this.timeid = this.info.timeInfo.id
					this.dayName = this.getdays(this.timeInfo.starttime)
				}
				
				if(!this.timeInfo || !this.timeInfo.id){
					this.$toast('技师忙碌中，暂时无法预约')
					return
				}
				
				if(!this.address || !this.address.id){
					this.address = await this.getAddress()
				}
				if(!this.address) return
				
				this.$api.post('/travelprice', {
					address_id: this.address.id,
					cate_id: this.cate_id,
					service_id: this.service_id,
					num: this.num,
					traveltype: this.traveltype,
					time_id: this.timeInfo.id
				}).then(res => {
					this.msg = ''
					if (res.code == 1) {
						this.travel = res.data
					}
				}).catch((res) => {
					this.msg = res.msg
					this.travel = ''
				})
			},
			mychoosetime(item){
				this.timeid = item.id
				this.timeInfo = item
				this.dayName = this.getdays(this.timeInfo.starttime)
			},
			open() {
				
			},
			close() {
				this.selectTimeShow = false
				
			},
			chooseday(index){
				if(index !== this.day){
					this.day = index
					this.showTime()
				}
				
			},
			prevDateFun(object) {
				
			},
			
			toSelectAddress() {
				if(this.address && this.address.id){
					uni.navigateTo({
						url: '/pages/selectAddress/selectAddress?id='+this.address.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/selectAddress/selectAddress'
					})
				}
				
			},
			selectConfirm() {
				this.selectTimeShow = false
			},
			toCoupon() {
				let money = this.info.cateInfo.price * this.num
				uni.navigateTo({
					url: '/pages_index/chooseCoupon/chooseCoupon?id='+(this.coupon ? this.coupon.id : '')+'&cate_id='+this.cate_id+'&money='+money
				})
			},
			toPayOrder() {
				if(this.address === ''){
					this.$toast('请选择正确的地址')
					return
				}
				if(this.travel === ''){
					this.$toast('请选择正确的出行方式')
					return
				}
				let data = {
					id: this.order_id,
					cate_id: this.cate_id,
					name: this.info.cateInfo.name,
					address_id: this.address.id,
					time_id: this.timeInfo.id,
					note: this.note,
					traveltype: this.traveltype,
					travelprice: this.travel.distance_price,
					counttype: this.travel.counttype,
					distance: this.travel.distance,
					distance_price: this.travel.distance_price,
					allprice: this.allprice,
					money: this.info.money,
				}
				uni.navigateTo({
					url: '/pages_order/orderrepair/payOrder?data='+JSON.stringify(data)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7FA;
		overflow: auto;
	}
	.content {
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	
		.main {
			overflow: hidden;
			flex: 1;
		}
	}

	.addressBox {
		width: 686rpx;
		background: #FBFBFE;
		box-sizing: border-box;
		margin: 30rpx auto;
		padding: 32rpx 0;

		.address {
			width: 686rpx;
			height: 144rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx 28rpx 32rpx;
			font-size: 30rpx;
			color: #1C274C;
			letter-spacing: 1px;
			font-weight: 600;
		}

		.user {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #ADB1BF;

			.name {
				margin: 0 18rpx 0 32rpx;
			}

			.update {
				display: flex;
				align-items: center;

				.icon {
					width: 9rpx;
					height: 15rpx;
					margin-left: 15rpx;
					margin-right: 32rpx;
				}
			}
		}
	}

	.project {
		width: 686rpx;
		padding: 30rpx 32rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		margin: 0 auto;
		position: relative;

		.fengmian {
			width: 200rpx;
			height: 160rpx;
			margin-right: 20rpx;
		}

		.right {
			flex: 1;
			.icon{
				width: 10rpx;
				height: 18rpx;
			}
			.name {
				font-size: 30rpx;
				font-weight: 600;
				color: #1C274C;
			}

			.gongneng {
				display: flex;
				align-items: center;
				margin: 15rpx 0 20rpx;

				view {
					padding: 0 10rpx;
					height: 40rpx;
					border-radius: 10rpx;
					opacity: 0.4;
					border: 1rpx solid #8D93A5;
					font-size: 20rpx;
					color: #1C274C;
					line-height: 40rpx;
					text-align: center;
					margin-right: 10rpx;
					display: -webkit-box; /* 将容器作为弹性盒子 */
					-webkit-box-orient: vertical; /* 垂直排列盒子内容 */
					-webkit-line-clamp: 1; /* 设置最大行数为1行 */
					overflow: hidden; /* 隐藏溢出的内容 */
					text-overflow: ellipsis; /* 使用省略号代替溢出的内容 */
				}
			}

			.price {
				display: flex;
				align-items: center;

				.money {
					margin-right: 15rpx;

					text:first-child {
						font-size: 24rpx;
						color: #E91919;
					}

					text:last-child {
						font-size: 28rpx;
						color: #E91919;
						font-weight: 600;
					}
				}
				.blank{
					flex: 1;
				}
				.vipPrice {
					width: 127rpx;
					height: 35rpx;
					background: url(/static/vipBg.png) no-repeat;
					background-size: contain;
					font-size: 22rpx;
					font-weight: 900;
					color: #292439;
					position: relative;
					margin-right: 50rpx;

					text {
						line-height: 35rpx;
						position: absolute;
						right: 10rpx;

					}
				}

				.minus,
				.plus {
					width: 44rpx;
					height: 44rpx;
					background-color: #00CE9B;
					color: #fff;
					border-radius: 50%;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					justify-content: center;
					align-items: center;
				}
			}

			.naozhong {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #00CE9B;
				width: 142rpx;
				height: 52rpx;
				background: rgba(0, 206, 155, .1);
				border-radius: 100rpx 0rpx 0rpx 100rpx;
				position: absolute;
				right: 0;
				top: 30rpx;

				image {
					width: 24rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.optionBox {
		width: 686rpx;
		padding: 30rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;
		box-sizing: border-box;

		.option {
			width: 626rpx;
			height: 114rpx;
			background: #F6F7FB;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 30rpx;

			.label {
				font-size: 28rpx;
				color: #3D4666;
			}

			.right {
				display: flex;
				align-items: center;
			}

			image:last-child {
				margin-left: 20rpx;
				width: 16rpx;
				transform: rotate(-90deg);
			}

			.chooseTime {
				color: #C2C5D0;
			}

			.available {
				font-size: 28rpx;
				color: #8D93A5;
				text-align: center;

				text {
					color: #00CE9B;
					margin-right: 10rpx;
				}
			}

			.btn {
				width: 144rpx;
				height: 52rpx;
				border-radius: 10rpx;
				border: 2rpx solid #8D93A5;
				color: #8D93A5;
				font-size: 24rpx;
				text-align: center;
				line-height: 52rpx;
				margin-left: 30rpx;
			}

			.btn1 {
				border: 2rpx solid #00CE9B;
				background-color: #00CE9B;
				color: #fff;
			}
		}

		.option1 {
			margin-top: 0;

			image:first-child {
				width: 60rpx;
				margin-right: 20rpx;
			}
		}

		.remark {
			width: 622rpx;
			height: 200rpx;
			background: #F6F7FB;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 12rpx;
			margin-top: 30rpx;

			.u-border {
				border: 0 !important;
			}

			.u-textarea {
				background: none;
			}
		}
	}

	.totalBox {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 32rpx;
		margin: 30rpx auto 0;

		.total {
			width: 622rpx;
			box-sizing: border-box;
			padding: 32rpx;
			background: #F6F7FB;
			border-radius: 20rpx;

			.zongjia {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.label {
					font-size: 28rpx;
					color: #3D4666;
				}

				s {
					font-size: 28rpx;
					font-weight: 600;
					color: #C2C5D0;
				}

				text {
					font-size: 28rpx;
					font-weight: 600;
					color: #1C274C;
					margin-left: 20rpx;
				}
			}

			.youhui {
				display: flex;
				justify-content: flex-end;
				font-size: 24rpx;
				color: #8D93A5;
				line-height: 50rpx;
			}

			.chefei {
				.didi {
					color: #8D93A5;
					letter-spacing: 2px;
				}
			}
		}
	}

	.pay {
		width: 750rpx;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 1rpx 0rpx 0rpx #EBEBEB;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 32rpx;

		.needPay {
			font-size: 24rpx;
			color: #8D93A5;

			.money {
				color: #E91919;

				text {
					font-size: 44rpx;
					font-weight: 600;
					margin-left: 2rpx;
				}
			}
		}

		.btn {
			width: 530rpx;
			height: 96rpx;
			background: #00CE9B;
			border-radius: 48rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}
	}
	.popobx{
		width: 100vw;
		height: 1000rpx;
		.popobxcontent{
			width: 100%;
			height: 100%;
			background: #F6F7FB;
			.popboxday{
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 30rpx;
				width: 750rpx;
				height: 132rpx;
				background: #FBFBFE;
				box-shadow: 0rpx 2rpx 25rpx 0rpx rgba(0,83,62,0.05);
				border-radius: 0rpx 0rpx 30rpx 30rpx;
				.popboxday_left{
					width: 60%;
					height: 100%;
					align-items: center;
					justify-content: space-around;
					.popboxday_left_item{
						align-items: center;
						flex-direction: column;
						// justify-content: space-between;
						height: 102rpx;
						color: #ADB1BF;
					}
					.green{
						color: $uni-primary;
					}
				}
				.popboxday_right{
					width: 167rpx;
					height: 75rpx;
					background: #00CE9B;
					border-radius: 48rpx;
					text-align: center;
					line-height: 75rpx;
				}
			}
			.popboxtime{
				overflow: auto;
				padding: 20rpx;
				flex-wrap: wrap;
				.popboxtime_item{
					margin-right: 12rpx;
					margin-top: 20rpx;
					background-color: #fff;
					width: 168rpx;
					height: 75rpx;
					border-radius: 15rpx;
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.t{
						font-size: 30rpx;
					}
					.b{
						font-size: 22rpx;
					}
				}
				.popboxtime_item:nth-of-type(4n){
					margin-right: 0;
				}
				.other{
					background: #999;
					color: #fff;
				}
				.green{
					background-color: $uni-primary;
					color: #fff;
				}
			}
		}
	}
</style>